var mapeditor = {};

var canvas;
var ctx;

var tile_columns;
var tile_rows;

window.onload = function(){
    canvas = document.createElement("canvas");
    var right = document.getElementById("right");
    canvas.width = window.innerWidth - 205;
    canvas.height = window.innerHeight - 10;

    right.appendChild(canvas);
    ctx = canvas.getContext("2d");

    tile_columns = 9;
    tile_rows = 9;

    drawGrid();
};

window.onresize =function(){
    canvas.width = window.innerWidth - 205;
    canvas.height = window.innerHeight - 10;
    drawGrid();
};

function drawGrid(){
    var w = canvas.width  / (tile_columns + 1) ;
    var h = canvas.height / (tile_rows + 1);

    var t = Math.min(w,h);

    ctx.save();
    ctx.fillStyle = "#dfb44b";
    ctx.lineWidth = 2;
    ctx.strokeStyle = "#382a14";
    var bx = (canvas.width - tile_columns * t) / 2;
    for(var r=0; r<tile_rows; r++){
        for( var c=0; c<tile_columns; c++){
            ctx.fillRect(bx + c*t, t/2 + r*t, t,t);
            ctx.strokeRect( bx + c*t, t/2 + r*t, t,t);
        }
    }
    ctx.restore();

}